<template>
  <div class="AddressEdit">
    <div class="head">
      <van-nav-bar
        title="新增收货地址"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <van-address-edit
      :list="list1"
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :address-info="list1"
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
    <van-popup
      position="bottom"
      round
    >
      <van-area
        title="标题"
        :area-list="areaList"
        value=""
        :columns-placeholder="['请选择省份', '请选择城市', '请选择区/县']"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { AddressEdit, Area, NavBar, Popup } from 'vant'
import areaList from '../../assets/style/js/area'
Vue.use(AddressEdit).use(Area).use(NavBar).use(Popup)
export default {
  data () {
    return {
      index1: 2,
      areaList,
      searchResult: [],
      list1: []
    }
  },
  created () {
    this.list1 = this.$route.query.item
    if (!this.$route.query.index) {
    } else {
      this.index1 = this.$route.query.index
      this.index1++
    }
  },
  methods: {
    onDelete () {
    },
    onChangeDetail (val) {
      if (val) {
        this.searchResult = [
          {
            name: '海华苑',
            address: '珠海市香洲区'
          }
        ]
      } else {
        this.searchResult = []
      }
    },
    onClickLeft () {
      this.$router.back(-1)
    },
    onConfirm (val) {
      console.log(val[0].name + ',' + val[1].name)
    },
    onSave (content) {
      let i = this.index1
      console.log(content)
      this.$router.push({path: '/AddressList', query: { content, i }})
    },
    onCancel () {
      this.$refs.myArea.reset()
    }
  }
}
</script>

<style scoped>
.shop-bottom {
  margin-bottom: 50px;
}
</style>
